<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Popup</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">
              <p><a class="link popup-open" href="#" data-popup=".popup-about">Open About Popup</a></p>
              <p><a class="link popup-open" href="#" data-popup=".popup-services">Open Services Popup</a></p>
              <p><a class="link dynamic-popup" href="#">Create Dynamic Popup</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="popup popup-about">
        <div class="block">
          <p>About</p>
          <p><a class="link popup-close" href="#">Close popup</a></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, pellentesque nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem. Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
        </div>
      </div>
      <div class="popup popup-services">
        <div class="block">
          <p>Services</p>
          <p><a class="link popup-close" href="#">Close popup</a></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, pellentesque nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem. Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var $$ = Dom7;
      
      // DOM events for About popup
      $$('.popup-about').on('popup:open', function (e, popup) {
        console.log('About popup open');
      });
      $$('.popup-about').on('popup:opened', function (e, popup) {
        console.log('About popup opened');
      });
      
      // Create dynamic Popup
      var dynamicPopup = app.popup.create({
        content: '<div class="popup">'+
                    '<div class="block">'+
                      '<p>Popup created dynamically.</p>'+
                      '<p><a href="#" class="link popup-close">Close me</a></p>'+
                    '</div>'+
                  '</div>',
        // Events
        on: {
          open: function (popup) {
            console.log('Popup open');
          },
          opened: function (popup) {
            console.log('Popup opened');
          },
        }
      });
      // Events also can be assigned on instance later
      dynamicPopup.on('close', function (popup) {
        console.log('Popup close');
      });
      dynamicPopup.on('closed', function (popup) {
        console.log('Popup closed');
      });
      
      // Open dynamic popup
      $$('.dynamic-popup').on('click', function () {
        dynamicPopup.open();
      });
    </script>
  </body>
</html>